<template lang="pug">
    header#header
        .layout-wrap.clear
            .logo.fl
                img(src="../../images/logo.png", alt="")
            .fr
                i.ic-phone
                .contact.fr
                    p.server_phone 全国服务电话
                    p.phone 400-888-8888
            span.h5_menu-btn.hidden(@touchend="toggleMenu", @click="toggleMenu", :class="{'opened': menuOpened}")
                i
        navList
</template>

<script>

import navList from './nav';

export default {
    data() {
        return {
            menuOpened: false,
        };
    },
    components: {
        navList,
    },
    methods: {
        toggleMenu() {
            this.menuOpened = true;
            this.$emit('openmenu');
        }
    }
};
</script>

<style lang="postcss">

#header{padding-top: 30px;
    .logo{
        width: 214px;
        height: 60px;
    }
    .ic-phone{
        float: left;
        width: 45px;
        height: 45px;
        background: url('../../images/tel.png') no-repeat;
    }
    .server_phone{
        line-height: 22px;
    }
    .phone{
        line-height: 30px;
        @extend %YaHeiUI-bold;
        font-size: 24px;
        color: #000;
    }
}

.h5_menu-btn{
    position: absolute;
    top: 10px;
    right: 10px;
    width: 40px;
    height: 40px;
    display: block;
    &.opened{
        i{height:0;}
        &:before{
            transform: rotate(-45deg);
            transform-origin: 20px 5px;
        }
        &:after{
            transform: rotate(45deg);
            transform-origin: 15px 0;
        }
    }
    &:before, &:after, i{
        content: '';
        position: absolute;
        left: 10px;
        width: 20px;
        height: 2px;
        background: #fff;
        transition: transform .2s;
    }
    &:before{top:12px;}
    i{top: 18px;}
    &:after{top: 24px;}
}

@media screen and (max-width: 420px) {
    #header{
        height: 34px;
        padding: 13px 20px;
        background: #178067;
        .fr, img{display: none;}
        .logo{
            width: 120px;
            height: 34px;
            background: url('../../images/logo_h5.png') no-repeat;
            background-size: cover;
        }
    }
}

</style>
